<template>
	<view class="app">
		<getheader :headertype="'lists'"></getheader>
		<view class="top">
			<view class="sort-bar row">
				<view class="item row center" :class="{active: item.current, last: index === sortList.length-1}"
					v-for="(item,index) in sortList" :key="index" @click="setSort(item)">
					<text>{{ item.name }}</text>
					<view v-if="item.isPrice" class="icon-wrap">
						<text class="mix-icon icon-down" :class="{active: item.type === 3}"></text>
						<text class="mix-icon icon-arrow-top" :class="{active: item.type === 4}"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="get20vw"></view>
		<view class="get5vw"></view>
		<getprolist :list="proList" :listType="listType"></getprolist>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import getheader from '@/pages/components/getheader.vue';
	import getprolist from '@/pages/components/getprolist.vue';
	import uniLoadMore from '@/common/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			getheader,
			getprolist,
			uniLoadMore,
		},
		data() {
			return {
				sortList: [],
				proList: [],
				listType: 'pro',
				isload: 0,
				loadingType: 'more',
			}
		},
		onLoad() {
			let that = this;
			that.sortList = that.globals.sortList;
			that.startFnc();
			console.log('产品数据', that.proList);

		},
		onReachBottom() {
			this.getProlist();
			console.log("上滑动,加载您的数据");
			// more = contentdown: "上拉显示更多",
			// loading =contentrefresh: "正在加载...",
			// nomore = contentnomore: "没有更多数据了"
			// 在此进行上拉刷新的业务逻辑
		},
		methods: {
			startFnc() {
				this.getProlist();
			},
			getProlist() {
				// ----- 这里是获取数据源部分 ----
				this.showLoading(1);
				
				// ------ 下面是获取数据后操作
				let list = this.globals.proList;
				if(this.isload == 1){
					this.isload = 0;
					this.proList = [];
				}
				
				for(var i = 0; i < list.length; i++){
					this.proList.push(list[i]);
				}
				
				this.hideLoading(500);
			},

			setSort(item) {
				// ----- 这里是排序部分 ----
				if (item.current) {
					if (item.isPrice) {
						item.type = item.type === 3 ? 4 : 3;
					} else {
						return;
					}
				} else {
					this.sortList.forEach(v => v.current = false);
					item.current = true;
					if (item.type === 3 || item.type === 4) {
						item.type = 3;
					}
				}
				
				this.isload = 1;
				this.getProlist();
			}
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.app {

		/* #ifndef MP */
		&.overhidden {
			height: 100vh;
			overflow: hidden;
		}
		/* #endif */
	}

	.top {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 95;
		background-color: #fff;
		top: 11vw;
	}

	.sort-bar {
		justify-content: space-around;
		height: 11vw;
		padding: 1vw 0 1vw 0;
		/* #ifdef MP */
		padding-left: 2%;
		/* #endif */
		background-color: $white;
		position: relative;
		z-index: 1;

		.item {
			flex: 1;
			height: 100%;
			font-size: 4vw;
			color: $darkblack;
			position: relative;
			overflow: hidden;

			&.active {
				color: $base-color;
				font-weight: 700;

				&:after {
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-28rpx);
					content: '';
					width: 24%;
					height: 1vw;
					background-color: $base-color;
					border-radius: 1vw;
				}

				.mix-icon.active {
					color: $base-color;
				}
			}

			/* #ifdef MP */
			&.last:before {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1%;
				height: 10vw;
				box-shadow: 0 0 16rpx rgba(0, 0, 0, .6);
			}

			/* #endif */
		}

		.icon-wrap {
			display: flex;
			flex-direction: column;
			padding-left: 1vw;
		}

		.mix-icon {
			font-size: 3vw;
			color: $gray;
		}

	}
</style>